<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>09.v-on修饰符</title>
		<style type="text/css">
			#app div {
				width: 100px;
				height: 100px;
				border: 1px solid black;
			}

			.a {
				background-color: #fff815;
			}

			.b {
				background-color: #5252ff;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 事件后面跟上.事件修饰符可以对事件进行限制 -->
			<input value="按回车改变盒子颜色" @keydown.q1.y="keyd" />
			<div :class="bol?'a':'b'"></div>
		</div>
		<script src="./vue-v2.7.13.js"></script>

		<script>
			// vue中的事件修饰符:
			// 1. prevent: 阻止默认事件（ 常用）;
			// 2. stop: 阻止事件冒泡（ 常用）;
			// 3. once: 事件只触发一次（ 常用）;
			// 4. capture: 使用事件的捕获模式;
			// 5. self: 只有event.target是当前操作的元素时才触发事件;
			// 6. passive: 事件的默认行为立即执行， 无需等待事件回调执行完毕;

			Vue.config.keyCodes.q1 = 13 //定义一个按键的别名 13 键码 ==回车


			//文档链接
			//https://v2.cn.vuejs.org/v2/guide/events.html?#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6
			var app = new Vue({
				el: "#app", //Id #id class .name  标签 div
				//输出的数据
				data: {
					bol: true
				},
				//对象 方法
				methods: {
					keyd: function(e) {
						this.bol = !this.bol
						console.log(e.key)
					}
				}
			})
		</script>

	</body>

</html>
